<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form表单</title>
</head>
<body>

    <!--
        HTTP协议， GET/POST/PUT/DELTE/OPTIONS/HEAD等
        form表单只支持两种：
            get 没有请求体，提交数据时，表单中的内容会附在请求地址后面以key=value 
                get 请求时只能提交 2KB 大小的数据(不准确)
            post 有请求体，提交数据时，表单内容会放在请求体中
        -->
    <form action="" method="get" id="f1" name="f1" enctype="application/x-www-form-urlencoded">
        <!-- 表单元素 -->
        <!-- 
             readonly 
             disabled
         -->
        <input type="text" name="username" form="f1" value="" id="username" required placeholder="请输入用户名" autofocus title="title">
        <input type="password" name="password" form="f1">
        爱好:<input type="checkbox" name="hobby" id="" value="男">男
        <input type="checkbox" checked name="hobby" id="" value="打游戏">打游戏
        <input type="checkbox" checked name="hobby" id="" value="写代码">写代码
        <br >
        <input type="color" name="color" id="">
         <input type="date" name="date" id="">
         <input type="file" name="file" id="">
         <input type="hidden" name="hidden">
         <input type="radio" name="gender" value="男" checked>男
         <input type="radio" name="gender" value="女">女
        <!-- 提交按钮 -->
        <input type="button" value="按钮">
        <button type="button">按钮</button>
        <input  type="submit" value="登录">
        <button type="submit">登录</button>
        <!-- 重置 != 清空 -->
        <input type="reset" value="重置">
        <button type="reset">重置</button>

        <textarea name="textarea" id="" cols="20" rows="5" style="resize: none;"></textarea>
         
        <select name="addr">
            <optgroup label="甘肃">
                <option>白银</option>
                <option>武威</option>
                <option selected>兰州</option>
            </optgroup>
            <optgroup label="陕西">
                <option>西安</option>
                <option>汉中</option>
                <option>咸阳</option>
            </optgroup>
            
        </select>

        <input type="text" list="a">
        <datalist id="a">
            <option>11111</option>
            <option>22222</option>
            <option>33333</option>
        </datalist> 
    </form>

    
</body>
</html>